<template>
	<view class="page-container">
		<!-- 公共模块，显示返回箭头和标题 -->
		<public-module leftIcon="arrow-left" :title="title" />
		
		<!-- 积分提示条 -->
		<view class="points-notice">
			<u-icon name="info-circle" size="24" color="#FF9500"></u-icon>
			<text class="notice-text">目前有25、26年数据，查询10积分/次，您积分：{{ user.totalPoints || 0 }}</text>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-wrapper">
			<!-- 筛选区域 - 可折叠 -->
			<view class="filter-section" v-if="showFilter">
				<!-- 筛选表单 -->
				<view class="filter-form">
					<view class="form-row">
						<view class="form-item">
							<text class="form-label">年份:</text>
							<u-input v-model="filterForm.recruitmentYear" placeholder="如2025或2026" class="form-input" />
						</view>
						<view class="form-item">
							<text class="form-label">地区:</text>
							<u-input v-model="filterForm.areaName" placeholder="地区名称" class="form-input" />
						</view>
					</view>
					<view class="form-row">
						<view class="form-item">
							<text class="form-label">学历:</text>
							<u-input v-model="filterForm.education" placeholder="学历要求" class="form-input" />
						</view>
						<view class="form-item">
							<text class="form-label">专业:</text>
							<u-input v-model="filterForm.major" placeholder="专业名称" class="form-input" />
						</view>
					</view>
					<view class="form-row">
						<view class="form-item">
							<text class="form-label">部门:</text>
							<u-input v-model="filterForm.unitName" placeholder="部门名称" class="form-input" />
						</view>
						<view class="form-item">
							<text class="form-label">其他:</text>
							<u-input v-model="filterForm.otherRequirements" placeholder="其他要求" class="form-input" />
						</view>
					</view>
				</view>
				
				<!-- 按钮组 -->
				<view class="button-group">
					<u-button type="primary" @click="handleSearch" :loading="loading" size="small">
						<u-icon name="search" size="16" style="margin-right: 3px;"></u-icon>
						搜索
					</u-button>
					<u-button type="default" @click="handleReset" size="small">
						<u-icon name="reload" size="16" style="margin-right: 3px;"></u-icon>
						重置
					</u-button>
				</view>
			</view>
			
			<!-- 筛选条件展示与折叠按钮 -->
			<view class="filter-toggle" @click="toggleFilter">
				<view class="filter-tags" v-if="!showFilter && hasActiveFilters">
					<text class="filter-tag" v-if="filterForm.recruitmentYear">{{ filterForm.recruitmentYear }}年</text>
					<text class="filter-tag" v-if="filterForm.areaName">{{ filterForm.areaName }}</text>
					<text class="filter-tag" v-if="filterForm.education">{{ filterForm.education }}</text>
					<text class="filter-tag" v-if="filterForm.major">{{ filterForm.major }}</text>
					<text class="filter-tag" v-if="filterForm.otherRequirements">{{ filterForm.otherRequirements }}</text>
				</view>
				<view class="toggle-btn">
					<u-icon :name="showFilter ? 'arrow-up' : 'arrow-down'" size="18" color="#4A89DC"></u-icon>
					<text class="toggle-text">{{ showFilter ? '收起筛选' : '展开筛选' }}</text>
				</view>
			</view>
			
			<!-- 结果统计 -->
			<view class="result-summary" v-if="jobList.length > 0">
				<text class="summary-text">共找到 <text class="highlight">{{ total }}</text> 个岗位</text>
			</view>
			
			<!-- 岗位列表容器 -->
			<view class="list-container">
				<mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="job-list">
						<view class="job-item" v-for="(item, index) in jobList" :key="index" @click="showJobDetail(item)">
							<!-- 岗位标题 -->
							<view class="job-header">
								<view class="job-title">{{ item.positionName }}</view>							
							</view>
							
							<!-- 单位信息 -->
							<view class="job-info-row">
								<text class="info-label">招录单位：</text>
								<text class="info-value">{{ item.unitName }}</text>
								<view class="job-badge">{{ item.affiliation }}</view>
							</view>
							
							<!-- 基本要求 -->
							<view class="job-info-row">
								<text class="info-label">学历要求：</text>
								<text class="info-value">{{ item.education }}</text>
								<view class="job-badge">{{ item.recruitmentYear }}</view>
							</view>
							
							<view class="job-info-row">
								<text class="info-label">专业要求：</text>
								<text class="info-value major-text">{{ item.major }}</text>
							</view>
							
							<!-- 竞争数据 -->
							<view class="job-stats">
								<view class="stat-item">
									<text class="stat-label">招录人数</text>
									<text class="stat-value">{{ item.recruitmentNumbers }}</text>
								</view>
								<view class="stat-item">
									<text class="stat-label">报名人数</text>
									<text class="stat-value hot">{{ item.applicationNumbers }}</text>
								</view>
								<view class="stat-item">
									<text class="stat-label">竞争比</text>
									<text class="stat-value">{{ item.applicationRatio }}</text>
								</view>
							</view>
							
							<!-- 面试分数 -->
							<view class="interview-scores" v-if="item.minimumInterviewScore">
								<text class="score-item">最低分: {{ item.minimumInterviewScore }}</text>
								<text class="score-item">最高分: {{ item.maximumInterviewScore }}</text>
								<text class="score-item">平均分: {{ item.averageInterviewScore }}</text>
							</view>
						</view>
					
									<!-- 空状态 -->
						<view class="empty-state" v-if="!loading && jobList.length === 0">
							<u-icon name="search" size="80" color="#cccccc"></u-icon>
							<text class="empty-text" v-if="!hasSearched">请填写筛选条件后点击搜索</text>
							<text class="empty-text" v-else>暂无符合条件的岗位</text>
							<text class="empty-tip" v-if="hasSearched">请尝试调整筛选条件</text>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { applicationList } from "@/config/api.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				title: '岗位筛选',
				filterForm: {
					recruitmentYear: '',
					major: '',
					areaName: '',
					education: '',
					unitName: '',
					otherRequirements: ''
				},
				jobList: [],
				total: 0,
				loading: false,
				hasSearched: false,
				showFilter: true, // 是否显示筛选区域
				// mescroll配置
				downOption: {
					use: false
				},
				upOption: {
					page: {
						num: 0,
						size: 10
					},
					noMoreSize: 5,
					auto: false, // 禁用自动加载
					empty: {
						use: false // 禁用默认空状态，使用自定义空状态
					}
				}
			}
		},
		computed: {
			...mapState(['user']),
			// 是否有激活的筛选条件
			hasActiveFilters() {
				return this.filterForm.recruitmentYear || 
				       this.filterForm.major || 
				       this.filterForm.areaName || 
				       this.filterForm.education || 
					   this.filterForm.unitName || 
				       this.filterForm.otherRequirements;
			}
		},
		methods: {
			// mescroll初始化回调
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			
			// 下拉刷新回调
			downCallback(mescroll) {
				this.upCallback(mescroll);
			},
			
			// 上拉加载回调
			async upCallback(page) {
				// 如果用户还未搜索过，不执行查询
				if (!this.hasSearched) {
					this.mescroll.endSuccess(0, true); // 结束加载，显示无数据
					return;
				}
				
				try {
					// 构建查询参数
					let params = `?pageNum=${page.num}&pageSize=50`;
					
					if (this.filterForm.recruitmentYear) {
						params += `&recruitmentYear=${encodeURIComponent(this.filterForm.recruitmentYear)}`;
					}
					if (this.filterForm.major) {
						params += `&major=${encodeURIComponent(this.filterForm.major)}`;
					}
					if (this.filterForm.areaName) {
						params += `&areaName=${encodeURIComponent(this.filterForm.areaName)}`;
					}
					if (this.filterForm.education) {
						params += `&education=${encodeURIComponent(this.filterForm.education)}`;
					}
					if (this.filterForm.unitName) {
						params += `&unitName=${encodeURIComponent(this.filterForm.unitName)}`;
					}
					if (this.filterForm.otherRequirements) {
						params += `&otherRequirements=${encodeURIComponent(this.filterForm.otherRequirements)}`;
					}
					
					const { code, rows, total, msg } = await applicationList(params);
					
					if (code === 200) {
						this.total = total;
						
						// 如果是第一页，清空数据
						if (page.num === 1) {
							this.jobList = [];
						}
						
						// 追加数据
						this.jobList = this.jobList.concat(rows || []);
						
						// 结束加载
						this.$nextTick(() => {
							this.mescroll.endSuccess(rows ? rows.length : 0);
						});
					} else if (code === 500) {
						// 处理积分不足等错误
						this.mescroll.endErr();
						
						// 显示友好的错误提示
						uni.showModal({
							title: '提示',
							content: msg || '用户积分不足，无法完成操作，请努力赚积分！',
							showCancel: false,
							confirmText: '我知道了',
							success: (res) => {
								if (res.confirm) {
									// 重置搜索状态，让用户可以重新查看筛选条件
									this.hasSearched = false;
									this.showFilter = true;
								}
							}
						});
					} else {
						// 其他错误
						this.mescroll.endErr();
						uni.$u.toast(msg || '查询失败，请稍后重试');
					}
				} catch (err) {
					console.error('获取岗位列表失败:', err);
					this.mescroll.endErr();
					uni.$u.toast('网络异常，请检查网络连接');
				}
			},
			
			// 搜索
			handleSearch() {
				this.hasSearched = true;
				this.showFilter = false; // 搜索后自动收起筛选区域
				this.mescroll.resetUpScroll();
			},
			
			// 重置
			handleReset() {
				this.filterForm = {
					recruitmentYear: '',
					major: '',
					areaName: '',
					education: '',
					unitName: '',
					otherRequirements: ''
				};
				this.jobList = [];
				this.total = 0;
				this.hasSearched = false;
			},
			
			// 显示岗位详情
			showJobDetail(job) {
				if (!job) {
					uni.showToast({
						title: '岗位信息不存在',
						icon: 'none'
					});
					return;
				}
				
				// 跳转到详情页面,通过URL参数传递数据
				try {
					const jobData = encodeURIComponent(JSON.stringify(job));
					uni.navigateTo({
						url: `/pages/job-filter/detail?job=${jobData}`
					});
				} catch (err) {
					console.error('跳转失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			},
			
			// 切换筛选区域显示
			toggleFilter() {
				this.showFilter = !this.showFilter;
			}
		}
	}
</script>

<style scoped>
	/* 页面容器 */
	.page-container {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
		position: relative;
	}
	
	/* 积分提示条样式 */
	.points-notice {
		display: flex;
		align-items: center;
		background-color: #FFF8E6;
		padding: 16rpx 20rpx;
		font-size: 26rpx;
		color: #E67E22;
		border-bottom: 1px solid #FFE0B2;
	}
	
	.notice-text {
		margin-left: 10rpx;
		line-height: 1.4;
	}
	
	/* 内容包裹器 - 为导航栏留出空间 */
	.content-wrapper {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	
	/* 列表容器 - 确保列表在结果统计下方 */
	.list-container {
		flex: 1;
		overflow: hidden;
	}
	
	/* 筛选区域 */
	.filter-section {
		background-color: #fff;
		padding: 20rpx;
		margin: 15rpx 20rpx 0;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		animation: slideDown 0.3s ease;
		flex-shrink: 0;
	}
	
	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	.filter-form {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.form-row {
		display: flex;
		gap: 20rpx;
		align-items: center;
	}
	
	.form-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10rpx;
	}
	
	.form-item.full-width {
		flex: 1;
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		white-space: nowrap;
		min-width: 100rpx;
		font-weight: 500;
	}
	
	.form-input {
		flex: 1;
		background-color: #f8f8f8;
		border-radius: 10rpx;
	}
	
	.button-group {
		display: flex;
		gap: 15rpx;
		margin-top: 15rpx;
	}
	
	.button-group button {
		flex: 1;
	}
	
	/* 筛选条件展示与折叠 */
	.filter-toggle {
		background-color: #fff;
		padding: 12rpx 20rpx;
		margin: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		flex-shrink: 0;
	}
	
	.filter-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		flex: 1;
	}
	
	.filter-tag {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
		font-size: 22rpx;
	}
	
	.toggle-btn {
		display: flex;
		align-items: center;
		gap: 5rpx;
	}
	
	.toggle-text {
		font-size: 24rpx;
		color: #4A89DC;
	}
	
	/* 结果统计 */
	.result-summary {
		padding: 15rpx 20rpx;
		margin: 0 20rpx 15rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(102, 126, 234, 0.25);
		flex-shrink: 0;
	}
	
	.summary-text {
		color: #fff;
		font-size: 28rpx;
	}
	
	.highlight {
		color: #FFD700;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	/* mescroll容器 - 占据剩余空间 */
	.mescroll-container {
		width: 100%;
		height: 100%;
	}
	
	/* 覆盖 mescroll 的默认样式 */
	.mescroll-container >>> .mescroll-uni-warp,
	.mescroll-container ::v-deep .mescroll-uni-warp {
		position: relative !important;
		height: 100% !important;
	}
	
	/* 岗位列表 */
	.job-list {
		padding: 20rpx;
		height: auto;
		min-height: 100%;
		box-sizing: border-box;
	}
	
	.job-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}
	
	.job-item:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
	}
	
	.job-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.job-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}
	
	.job-badge {
		background-color: #4A89DC;
		color: #fff;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	
	.job-info-row {
		display: flex;
		margin-bottom: 15rpx;
		line-height: 1.6;
	}
	
	.info-label {
		font-size: 26rpx;
		color: #666;
		min-width: 140rpx;
	}
	
	.info-value {
		font-size: 26rpx;
		color: #333;
		flex: 1;
	}
	
	.major-text {
		color: #4A89DC;
	}
	
	/* 竞争数据 */
	.job-stats {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}
	
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #999;
	}
	
	.stat-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.stat-value.hot {
		color: #FF6B6B;
	}
	
	/* 面试分数 */
	.interview-scores {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}
	
	.score-item {
		font-size: 24rpx;
		color: #666;
	}
	
	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #666;
		margin-top: 30rpx;
	}
	
	.empty-tip {
		font-size: 26rpx;
		color: #999;
		margin-top: 10rpx;
	}
</style>